<template>
  <div class="editorUser-contanier">
    <div class="editorUser-header" v-if="obj.Role=='1'">
      <h3>用户列表</h3>
      (&nbsp;
      <el-select v-model="searchKey" placeholder="一级单位查询" size='mini' @change="onSearch">
        <el-option v-for="item in departmentData" :key="item" :label="item" :value="item">
        </el-option>
      </el-select>
      &nbsp;)
    </div>
    <div class="editorUser-content">
      <el-table ref="singleTable" border :data="userLists.Data" highlight-current-row style="width: 100%">
        <el-table-column type="index" width="50" :index="indexMethod">
        </el-table-column>
        <el-table-column property="LoginName" label="用户名">
        </el-table-column>
        <el-table-column property="DepartmentName" label="单位名称">
        </el-table-column>
        <el-table-column property="Name" label="联络员" width="160">
        </el-table-column>
        <el-table-column property="Mobile" label="移动电话" width="120">
        </el-table-column>
        <el-table-column property="Telephone" label="办公室电话" width="120">
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            <el-button size="mini" @click="resetPassword(scope.row)">密码重置</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="editorUser-page" v-if="count>12">
        <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage3" :page-size="pageSize" layout="prev, pager, next, jumper"
          :total="count">
        </el-pagination>
      </div>
    </div>
    <el-dialog :title="promptTitle" :visible.sync="dialogVisible" width="550px">
      <div class="addUser-listRow">
        <div class="addUser-listCol1">
          <p>单位名称：</p>
        </div>
        <div class="addUser-listCol2">
          <select class="selected-row" v-model="one" placeholder="一级单位" size='mini' @change="selecteDeart">
            <option v-for="item in departments" :key="item.Name" :value="item">
              {{item.Name}}
            </option>
          </select>
          <select class="selected-row" v-model="tow" placeholder="二级单位" size='mini' style="margin-left:25px;">
            <option v-for="item in one.Childs" :key="item.Name" :value="item.Name">
              {{item.Name}}
            </option>
          </select>
          <span>*</span>
        </div>
      </div>
      <div class="addUser-listRow">
        <div class="addUser-listCol1">
          <p>登录名：</p>
        </div>
        <div class="addUser-listCol2">
          <el-input v-model="userInfo.LoginName"></el-input>
          <span>*</span>
        </div>
      </div>
      <div class="addUser-listRow">
        <div class="addUser-listCol1">
          <p>角色：</p>
        </div>
        <div class="addUser-listCol2">
          <el-radio-group v-model="userInfo.Role">
            <el-radio :label="0">普通用户</el-radio>
            <el-radio :label="2">管理员</el-radio>
            <el-radio :label="1">超级管理员</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="addUser-listRow">
        <div class="addUser-listCol1">
          <p>联络员姓名：</p>
        </div>
        <div class="addUser-listCol2">
          <el-input v-model="userInfo.Name" class="item-input"></el-input>
          <span>*</span>
        </div>
      </div>
      <div class="addUser-listRow">
        <div class="addUser-listCol1">
          <p>职务：</p>
        </div>
        <div class="addUser-listCol2">
          <el-input v-model="userInfo.Post" class="item-input"></el-input>
        </div>
      </div>
      <div class="addUser-listRow">
        <div class="addUser-listCol1">
          <p>办公电话：</p>
        </div>
        <div class="addUser-listCol2">
          <el-input v-model="userInfo.Telephone" class="item-input"></el-input>
        </div>
      </div>
      <div class="addUser-listRow">
        <div class="addUser-listCol1">
          <p>移动电话：</p>
        </div>
        <div class="addUser-listCol2">
          <el-input v-model="userInfo.Mobile" class="item-input"></el-input>
        </div>
      </div>
      <div class="addUser-listRow">
        <div class="addUser-listCol1">
          <p>传真：</p>
        </div>
        <div class="addUser-listCol2">
          <el-input v-model="userInfo.Fax" class="item-input"></el-input>
        </div>
      </div>
      <div class="addUser-listRow">
        <div class="addUser-listCol1">
          <p>分管领导：</p>
        </div>
        <div class="addUser-listCol2">
          <el-input v-model="userInfo.Boss" class="item-input"></el-input>
        </div>
      </div>
      <div class="addUser-listRow">
        <div class="addUser-listCol1">
          <p>办公电话：</p>
        </div>
        <div class="addUser-listCol2">
          <el-input v-model="userInfo.BossOfficePhone" class="item-input"></el-input>
        </div>
      </div>
      <div class="addUser-listRow">
        <div class="addUser-listCol1">
          <p>移动电话：</p>
        </div>
        <div class="addUser-listCol2">
          <el-input v-model="userInfo.BossMobile" class="item-input"></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editorUser">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        obj: JSON.parse(localStorage.getItem('userInfo')),
        searchKey: '',
        userInfo: {},
        promptTitle: '',
        one: {},
        tow: '',
        checked: false,
        departmentData: ['一级单位查询'],
        departments: [],
        userLists: [],
        currentPage3: 1,
        count: 0,
        pageIndex: 1,
        pageSize: 11,
        dialogVisible: false
      }
    },
    methods: {
      indexMethod(index) {
        return this.pageSize * (this.pageIndex - 1) + index + 1
      },
      handleCurrentChange(val) {
        this.pageIndex = val
        this.currentPage3 = val
        this.getUserList()
        console.log(`当前页: ${val}`);
      },
      // 下拉选择搜素
      onSearch() {
        this.searchKey = this.searchKey == '一级单位查询' ? '' : this.searchKey;
        this.getUserList();
      },
      // 显示用户编辑页面
      handleEdit(row) {
        this.promptTitle = `编辑[${row.LoginName}]用户`
        this.dialogVisible = true;
        this.checked = row.Role == '1' ? true : false;
        this.userInfo = row;
        this.departments.map((i) => {
          if (i.Name == row.DepartmentName) {
            this.one = i;
          } else {
            i.Childs.map(item => {
              if (row.DepartmentName == item.Name) {
                this.one = i
                this.tow = item.Name
              }
            })
          }

        })
        console.log(this.departments)
        console.log(this.userInfo, '145')

      },
      selecteDeart() {
        this.tow = ''
      },
      // 删除用户
      handleDelete(item) {
        this.$confirm(`此操作将删除${item.LoginName}用户, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          try {
            const result = await this.$delete('/api/User/' + item.Id)
            this.$message({
              type: 'success',
              message: '删除成功'
            });
            this.getUserList()
          } catch (error) {
            this.$message.error(error.message)
          }
        }).catch(() => { })
      },
      // 重置密码
      resetPassword(item) {
        this.$confirm(`${item.LoginName}用户的重置密码为: 000000 , 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          try {
            const result = await this.$post('/api/User/restPassword/' + item.Id)
            this.$message({
              type: 'success',
              message: '密码重置成功'
            });
          } catch (error) {
            this.$message.error(result.message)
          }
        }).catch(() => {
        });
      },
      //编辑用户提交 
      async editorUser() {
        var user = this.userInfo
        // user.Role = this.checked ? '1' : '0';
        user.DepartmentName = this.tow ? this.tow : this.one.Name;
        if (user.DepartmentName && user.LoginName && user.Name) {
          try {
            const result = await this.$put('/api/User', user)
            this.$message({
              type: 'success',
              message: '修改成功'
            });
            this.dialogVisible = false
            this.getUserList()
          } catch (error) {
            this.$message.error(error.message)
          }
        } else {
          this.$message({
            message: '请填写完整信息',
            type: 'warning'
          })
        }

      },
      // 获取所有单位列表
      async getDepartmentNames() {
        const result = await this.$get('/api/User/getDepartmentNames')
        this.departmentData = this.departmentData.concat(result)
      },
      // 获取用户列表
      async getUserList() {
        this.userLists = []
        const result = await this.$get('/api/User', { departmentName: this.searchKey, pageSize: this.pageSize, pageIndex: this.pageIndex })
        console.log(result, '用户列表')
        this.userLists = result
        this.count = result.Count
      }
    },
    created() {
      this.showHome.isShow = false;
      this.$get("/api/User/AllDepartments").then((data) => {
        this.departments = data
        console.log(data)
      })
      this.getDepartmentNames()
      this.getUserList()
    }
  }

</script>
<style lang="scss" scoped>
  .editorUser-contanier {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .editorUser-header {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    h3 {
      height: 50px;
      line-height: 50px;
      font-size: 16px;
      margin-right: 10px;
    }
  }

  .editorUser-content {
    height: 550px;
    width: 100%;
    margin-top: 10px;
    padding: 0 15px;
  }

  .editorUser-page {
    margin-top: 15px;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .addUser-listRow {
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    .addUser-listCol1 {
      display: flex;
      flex-direction: row;
      flex: 0.5;
      height: 40px;
      align-items: center;
      justify-content: flex-end;
      color: darkgray;
    }
    .addUser-listCol2 {
      display: flex;
      height: 40px;
      align-items: center;
      flex-direction: row;
      flex: 2;
      padding-left: 8px;
      span {
        margin-left: 10px;
        color: red;
        font-size: 16px;
      }
    }
  }

  .selected-row {
    height: 25px;
    outline: none;
    border-radius: 4px;
    width: 175px;
    border: 1px solid #dcdfe6;
  }

  .el-input {
    width: 200px;
    height: 25px;
    line-height: 25px;
  }
</style>